<template>
  <div>
    <van-nav-bar title="支付页面" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div>
      <img width="100%" src="../../assets/hhh.jpg" alt />
    </div>
    <van-password-input
      :value="value"
      info="密码为 6 位数字"
      :error-info="errorInfo"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    />
    <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      errorInfo: "",
      showKeyboard: true
    };
  },
  watch: {
    value(value) {
      const _this = this;
      if (value.length === 6 && value !== "225588") {
        this.errorInfo = "密码错误";
        value = "";
      } else if (value === "225588") {
        setTimeout(function() {
          _this.$router.push("/dir");
        }, 1000);
      } else {
        this.errorInfo = "";
      }
    }
  },
  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.push("/home");
    },
    onClickRight() {
      Toast("按钮");
    }
  }
};
</script>

<style>
</style>